<script setup lang="ts">
import HeaderTitle from './components/HeaderTitle.vue'
import MainView from './components/MainView.vue'

if(window.matchMedia('(prefers-color-scheme: dark)').matches)
  document.body.setAttribute('arco-theme', 'dark');
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
  if (event.matches) {
    //dark mode
    document.body.setAttribute('arco-theme', 'dark');
  } else {
    //light mode
    document.body.removeAttribute('arco-theme');
  }
})
</script>

<template>

  <a-layout class="margin" >
    <a-layout-header>
      <div class="wrapper">
        <HeaderTitle msg="DataPump" />
      </div>
    </a-layout-header>
    <a-layout-content><MainView/></a-layout-content>
  </a-layout>
  
</template>

<style scoped>
.margin{
  margin: 0 20px;
}

header .wrapper {
  line-height: 1.5;
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
  justify-content:center;
}
</style>
